<template>
<div>
    <div class="title">
        <p class="renyuan">人员管理</p>
        <Modal v-model="modal1" title="新增人员"  :loading="loading" @on-ok="asyncOK" width="570" :styles="{top:'180px'}">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" >
                <Form-item class="sost1" prop="userName">
                    <p class="tit">人员名称：</p>
                    <Input v-model="formValidate.userName"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
                </Form-item>
                <Form-item class="sost1" prop="orgName">
                    <p class="tit">组织机构：</p>
                    <Select v-model="formValidate.orgName" clearable class="selc selcc" style="width:240px;font-size: 14px" placeholder="未选择">
                        <Tree :data="baseData" expand @on-select-change="selectChange"></Tree>
                    </Select>
                </Form-item>
                <Form-item class="sost1" prop="userPwd">
                    <p class="tit">密码：</p>
                    <Input v-model="formValidate.userPwd"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
                </Form-item>
                <Form-item class="sost1" prop="roleId">
                    <p class="tit">角色：</p>
                    <Select v-model="formValidate.roleId" clearable class="selcjs" style="width:240px;font-size: 14px" placeholder="未选择" @on-change="abb">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item class="sost1" prop="email">
                    <p class="tit">邮箱：</p>
                    <Input v-model="formValidate.email"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
                </Form-item>
                <Form-item class="sost1" prop="mobile">
                    <p class="tit">手机号：</p>
                    <Input v-model="formValidate.mobile"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
                </Form-item>
                <Form-item class="sost1" prop="status">
                    <p class="tit">是否有效：</p>
                    <Select v-model="formValidate.status" clearable class="selc" style="width:240px;font-size: 14px" placeholder="未选择">
                        <Option v-for="item in yesList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Form-item>
            </Form>
            <div slot="footer" style="text-align: center;margin:0px 0px 0px 0px;">
                <Button id="serch1"  @click="handleSubmit_ry('formValidate')" type="primary">保存</Button>
            </div>
        </Modal>
    </div>
    <div class="sosuo6">
        <div style="display: flex;">
        <div class="sost5">
            <p class="tit1">组织机构：</p>
            <Select v-model="filter.roleDepartment" clearable class="selc selcc1" style="width:200px;font-size: 14px" placeholder="未选择">
                <Tree :data="baseData" expand @on-select-change="selectChange"></Tree>
            </Select>
        </div>
         <div class="sost5">
            <p class="tit1">角色名称：</p>
            <Select v-model="filter.roleDepartment1" clearable class="selc selcc2" style="width:200px;font-size: 14px" placeholder="未选择" @on-change="abb1">
                <Option v-for="item in baseData1" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
        </div>
        <div class="sost5">
            <p class="tit1">人员名称：</p>
            <Input  size="large" placeholder="未编辑" style="width:200px;font-size: 14px;position: relative;top: 0px;" v-model="filter.userName" ></Input>
        </div>
        <div class="sost5">
            <p class="tit1">手机号：</p>
            <Input  size="large" placeholder="未编辑" style="width:200px;font-size: 14px;position: relative;top: 0px;" v-model="filter.mobile" ></Input>
        </div>
        </div>
        <Button class="congz"  type="primary" style="font-size: 18px;" @click="change">查询</Button>
        <span class="resert" @click="handleReset_5"  type="primary" style="font-size: 14px;">重置</span>
    </div>
    <div class="tab">
        <Button class="xinz" @click="newadd('formValidate')" type="primary" style="font-size: 18px;">新增</Button>
        <Table stripe  :columns="columns7" :data="list"></Table>
    </div>
    <div class="pag">
        <Page style="float:right;" :total="filter.total" :current="filter.pageIndex" :page-size="5" @on-change="changePage_ry"></Page>
    </div>
    
</div>   
</template>
<script>
    import Base from '../common/Base.js'
    export default {
        mixins:[Base],
        data () {
            return {
                baseData: [],
                baseData1: [],
                modal1: false,
                click:false,
                loading: true,
                filter:{
                    roleId:"",
                    orgCode:"",
                    userName:"",
                    mobile:'',
                    roleDepartment:'',
                    roleDepartment1:''
                },
                formValidate: {
                    userName: '',
                    mobile:'',
                    roleId: '',
                    orgId: '123',
                    email: '',
                    status: '',
                    userPwd:'',
                    tenantId:'',
                    createUser:'',
                    roleDepartment:'',
                    time:'',
                    orgCode:'',
                    roleName:'',
                    orgName:''
                },
                ruleValidate: {
                    userName: [
                        { required: true, message: '人员名称不能为空', trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true, message: '手机号不能为空', trigger: 'blur' },
                        { type: 'string', min:10, message: '手机号不正确', trigger: 'blur' }
                    ],
                    orgName: [
                        { required: true, message: '组织机构不能为空', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                    ],
                    status: [
                        { required: true, message: '请选是否有效', trigger: 'change' }
                    ],
                    roleId: [
                        { required: true, message: '请选择角色', trigger: 'change' }
                    ],
                    userPwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                },
                cityList: [
                ],
                 yesList: [
                    {
                        value: '1',
                        label: '是'
                    },
                    {
                        value: '0',
                        label: '否'
                    }
                ],
                columns7: [
                    {
                        title: '序号',
                        width: 60,
                        key: 'id'
                    },
                    {
                        title: '人员名称',
                        width: 100,
                        key: 'userName'
                    },
                    {
                        title: '手机号',
                        width: 120,
                        key: 'mobile'
                    },
                    {
                        title: '角色',
                        width: 107,
                        key: 'roleName'
                    },
                    {
                        title: '组织机构',
                        width: 150,
                        key: 'orgName'
                    },
                    {
                        title: '邮箱',
                        width: 170,
                        key: 'email'
                    },
                    {
                        title: '有效',
                        width: 50,
                        key: 'status1'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 180,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/xiugai.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding: '0px 20px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit_ry(params.index)
                                        }
                                    }
                                }, ''),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/shixiao.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding: '0px 20px'
                                    },
                                    on: {
                                        click: () => {
                                            this.lapse_ry(params.index)
                                        }
                                    }
                                }, ''),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/shanchu.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding:' 0px 20px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove_ry(params.index)
                                        }
                                    }
                                }, '')
                            ]);
                        }
                    }
                ]
            }
        },
        methods: {
            abb(node){
                console.log(node)
                console.log(this.cityList)
                for(let i=0;i<this.cityList.length;i++){
                    if(this.cityList[i].value==node){
                        this.formValidate.roleName=this.cityList[i].label
                    }
                }
                $('.selcjs .ivu-select-selection .ivu-select-selected-value').html(this.formValidate.roleName);
            },
            abb1(node){
                console.log(node)
                console.log(this.baseData1)
                this.filter.roleId=node
            },
            edit_ry(index) {
                this.add = true;
                this.$refs['formValidate'].resetFields();
                var _this = this;
                var dataObj = Object.assign({}, _this.list[index]);
                _this.modal1 = true;
                _this.formValidate = dataObj;
                console.log(dataObj)
                $('.selcc .ivu-select-selection .ivu-select-selected-value').html(_this.formValidate.orgName);
                $('.selcjs .ivu-select-selection .ivu-select-selected-value').html(_this.formValidate.roleName);
            }, 
            getData_jslist(){
                var _this = this;
                _this.$http.post(`${_this.dmoreurl}/saOrg/getAll`,{tenantId:_this.filter.tenantId}).then(res => {//-------------id
                    _this.baseData = res.data.data.root.child;
                    let str=JSON.stringify(_this.baseData);
                    str=str.replace(/child/g,"children");
                    str=str.replace(/orgName/g,"title");
                    str=JSON.parse(str); 
                    str[0].expand=true;
                    _this.baseData=str; 
                })
            },
            getData_jslist1(){
                var _this = this;
                _this.$http.post(`${_this.dmoreurl}/saRole/getAllRoleNoPage`,{tenantId:_this.filter.tenantId}).then(res => {//-------------id
                    console.log(res.data.data)
                    _this.baseData1 = res.data.data;
                    let str=JSON.stringify(_this.baseData1);
                    str=str.replace(/roleId/g,"value");
                    str=str.replace(/roleName/g,"label");
                    str=JSON.parse(str); 
                    _this.baseData1=str; 
                })
            },
            selectChange(node) {
                console.log(node[0])
                if(node.length != '0'){
                    if(this.modal1){
                        this.formValidate.orgName=node[0].title;
                        this.formValidate.orgId=node[0].orgId;
                        this.formValidate.orgCode=node[0].orgCode;
                        $('.selcc .ivu-select-selection .ivu-select-selected-value').html(node[0].title);
                        this.$http.post(`${this.dmoreurl}/saRole/getRoleByOrg`,{tenantId:this.filter.tenantId,roleDepartment:this.formValidate.orgName}).then(res => {//-------------id
                            console.log(res.data)
                            if(res.data.code == '200'){
                                this.cityList=res.data.data;
                                let str=JSON.stringify(this.cityList);
                                str=str.replace(/roleId/g,"value");
                                str=str.replace(/roleName/g,"label");
                                str=JSON.parse(str); 
                                str[0].expand=true;
                                this.cityList=str; 
                            }else{
                                this.cityList=[];
                            }
                        })
                    }else{
                        this.filter.roleDepartment=node[0].title;
                        this.filter.orgCode=node[0].orgCode;
                        $('.selcc1 .ivu-select-selection .ivu-select-selected-value').html(node[0].title);
                    }
                }
            },
            asyncOK () {
                setTimeout(() => {
                    this.modal1 = false;
                }, 1000);
            },
            changePage_ry(page) {
                var _this = this;
                _this.filter.pageIndex = page;
                _this.getData_ry();
                console.log(_this.filter.pageIndex)
            },
            change(){
                //$('.selcc1 .ivu-select-selection .ivu-select-selected-value').css("display");
                if($('.selcc1 .ivu-select-selection .ivu-select-selected-value').css("display")=='none'){
                    this.filter.orgCode='';
                }
                console.log(this.filter)
                this.getData_ry()
            },
            onclick(){
                alert(params.index)
            },
            handleReset_5() {
                this.filter.roleId='';
                this.filter.roleDepartment='';
                this.filter.roleDepartment1='';
                this.filter.orgCode='';
                this.filter.userName='';
                this.filter.mobile='';
            },
            newadd(name){
                this.add = false;
                this.modal1 = true;
                this.$refs[name].resetFields();
                Object.assign(this.$data.formValidate, this.$options.data().formValidate);
            },
            lapse_ry(index) {
                var _this = this;
                var dataObj = Object.assign({}, _this.list[index]);
                dataObj.status="0";
                this.$Modal.confirm({
                    title: '失效操作',
                    content: '<p>确认失效？</p>',
                    onOk: () => {
                        let deleteUrl = `${_this.dmoreurl}/saOrgUser/saOrgUserUpdate`;
                        _this.$http.post(deleteUrl,dataObj)
                            .then(response => {
                                _this.getData_ry()
                                this.$Message.info('该数据已失效');
                            })
                    },
                    onCancel: () => {
                        this.$Message.info('取消数据失效');
                    }
                });
                    
            },
            remove_ry(index) {
                var _this = this;
                this.$Modal.confirm({
                    title: '确认删除数据',
                    content: '<p>确认删除数据</p>',
                    onOk: () => {
                        let deleteUrl = `${_this.dmoreurl}/saOrgUser/saOrgUserDel`;
                        _this.$http.post(deleteUrl,{userId:_this.list[index].userId})
                            .then(response => {
                                _this.getData_ry()
                                this.$Message.info('成功删除数据');
                            })
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除数据');
                    }
                });

            },
            handleSubmit_ry(name) {
             let time=new Date().getTime();
             this.formValidate.time=time; 
             var _this = this;
            // _this.formValidate.orgCode='';
             _this.formValidate.createUser=_this.filter.createUser;
             _this.formValidate.tenantId=_this.filter.tenantId;
             var submitUrl, submitMethods;
            if (_this.add) {
                 submitUrl = `${_this.dmoreurl}/saOrgUser/saOrgUserUpdate`;
                 submitMethods = 'POST';
                console.log('up')
             } else {
                 submitUrl = `${_this.dmoreurl}/saOrgUser/saOrgUserAdd`;
                 submitMethods = 'POST'
                 console.log('new')
             }
             console.log(_this.formValidate)
             _this.$refs[name].validate((valid) => {
                if (valid) {
                    _this.$http({
                            url: submitUrl,
                            method: submitMethods,
                            data:_this.formValidate
                        })
                        .then(function(response) {
                            if(response.data){
                                console.log(response)
                            _this.$Message.success('提交成功!');
                            _this.modal1 = false;
                            _this.getData_ry();
                            Object.assign(_this.$data.formValidate, _this.$options.data().formValidate);
                            }else{
                                _this.$Message.success('用户名重复！    请修改！');
                            }  
                        }).catch((error) => {
                            if (error) {
                                this.$Message.info(error.response.msg)
                            }
                        });
                } else {
                    this.$Message.error('表单验证失败!');
                }
                })
            },
            getData_ry() {//分页查询暂定
                var _this = this;
                _this.$http.post(`${_this.dmoreurl}/saOrgUser/saOrgUserQuery`,_this.filter)
                    .then(function(response) {
                        _this.list = response.data.data.list;
                        _this.filter.total = response.data.data.total;
                        let length_yr=_this.list.length;
                        for( let i=0;i<length_yr;i++){
                            _this.list[i]['id']=i+1;
                            //_this.list[i]['roleId']= _this.list[i].roleList[0].roleId;
                            if(_this.list[i]['status']=='1'){
                                _this.list[i]['status1']='是';
                            }else{
                                _this.list[i]['status1']='否';
                            }
                        }
                    })
            }
        },
        watch:{

        },
        updated(){
            $('.ivu-tree-arrow').trigger("click")
        },
        created() {
            this.getData_ry();
            this.getadmin();
            this.getData_jslist();
            this.getData_jslist1();
            
        },
        mounted() {
        }
    }
</script>
<style lang="scss" >
    .ivu-modal .ivu-select-dropdown{
        position:fixed !important;
    }
    .ivu-modal{
        padding-bottom:30px;
    }
    .resert{
        font-size: 18px !important;
        position: relative;
        left: 33px;
        top: 20px;
        color: #5b8cff;
        cursor: pointer;
    }
    .ivu-modal-footer{
        border-top: 0px solid #e9eaec;
        padding: 0px 18px 30px 18px;
    }
    .ivu-table-header table thead tr th{
        height:50px;
        background:#f6f8fc;
    }
    .ivu-icon-ios-search{
        font-size:18px;
        position: relative;
        top: 3px;
    }
    .ivu-icon-ios-search:hover{
        color:#2d8cf0;
    }
    .ivu-page-item-active {
        background:#5b8cff;
    }
    .ivu-modal-header-inner{
        font-size: 18px;
        color: white;
        margin-left: 15px;
        font-weight: 500;
    }
    .ivu-icon-ios-close-empty{
        color: white !important;
        margin-top: -3px !important;
        font-size: 40px !important;
    }
    .ivu-modal-header{
        background:#5b8cff;
    }
    .pag{
        padding: 0px 30px 30px 30px;
        float: right;
    }
    th .ivu-table-cell {
        display:block;
        color: #848996;
        font-size: 14px;
    }
    .ivu-table-cell{
        text-align: center;
        padding-left: 0px;
        padding-right: 0px;
        font-size: 14px;
    }
    #serch{
        width: 100px;
        height: 40px;
        border-radius: 40px;
        background: linear-gradient(to left top,rgb(81,84,255),rgb(91,140,255));
        font-family: "microsoft yahei";
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-align: center;
        color:#ffffff;
        letter-spacing: 1px;
        box-shadow: 0px 3px 1px rgba(91, 140, 255, 0.3);
    }
    #serch:hover{
        background: linear-gradient(to left top,rgb(94,97,255),rgb(105,150,255));
    }
    #serch1{
        width: 240px;
        height: 40px;
        border-radius: 4px;
        background:#5b8cff;
        font-family: "microsoft yahei";
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        text-align: center;
        color:#ffffff;
        letter-spacing: 1px;
        box-shadow: 0px 3px 1px rgba(91, 140, 255, 0.3);
    }
    #serch1:hover{
        background:#6896ff;
    }
    .sost{
        display: inline-block;
        width: 265px;
    }
    .sost1{
        display: inline-block;
        width: 265px;
        padding-left: 16px;
    }
    .tit{
        font-size: 14px;
        color: #848996;
    }
    .tit1{
        padding-bottom: 10px;
        font-size: 14px;
        color: #848996;
    }
    .sosuo6{
        padding: 22px 0px 30px 30px;
        border-bottom: 1px solid #dbe3f3;
    }
    .sosuo6_1{
        padding: 22px 0px 30px 0px;
        border-bottom: 1px solid #dbe3f3;
    }
    .ivu-select-placeholder{
        font-size: 14px !important;
    }
    .ivu-select-selected-value{
        font-size: 14px !important;
    }
    .ivu-select-selection{
        height: 40px !important;
        background:#f6f8fc;
    }
    .ivu-select-item-selected{
        background:#5b8cff;
    }
    .ivu-select-item-selected:hover{
        background:#5b8cff;
    }
    .title{
        height:60px;
        border-bottom:1px solid #dbe3f3;
    }
    .renyuan{
        font-size: 18px;
        color: #848996;
        float: left;
        margin-left: 30px;
        margin-top: 17px;
    }
    .congz:hover{
        background: #6896ff;
        border-color:#ffffff;
    }
    .congz{
        border-color:#5b8cff;
        margin-left: 1px;
        margin-top: 30px;
        width: 120px;
        height: 40px;
        background: #5b8cff;
        font-family: "microsoft yahei";
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-align: center;
        color:#ffffff;
        letter-spacing: 1px;
    }
    .xinz{
        margin-left: 1px;
        margin-bottom: 30px;
        width: 120px;
        height: 40px;
        background: #5b8cff;
        font-family: "microsoft yahei";
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-align: center;
        color:#ffffff;
        letter-spacing: 1px;
        box-shadow: 0px 3px 1px rgba(91, 140, 255, 0.3);
    }
    .xinz:hover{
        background:#6896ff;
        color:#ffffff;
    }
    .jues{
        color: #848996;
        font-size: 14px;
        margin-left: 31px;
        margin-top: 20px;
    }
    .ridou{
        font-size: 14px !important;
        border:none !important;
        box-shadow:none !important;
        height:25px !important;
        line-height: 25px !important;
    }
    .ivu-radio-wrapper-checked{
        color:#ffffff !important;
        background: #5b8cff !important;
        border-radius: 3px !important;
        height: 24px !important;
        line-height: 24px !important;
    }
    .ivu-input-group-append{
        background: #f6f8fc;
    }
</style>